<!--使用方法是'lsjlyddRefresh'参数用来刷新“历史记录与订单”，将其点击到第一个tab上-->
<!--使用方法是'params'参数用来传递数据过来
params:{
    id:"",
    ldhm:"",//来电号码
    mtly:"",
    other_id:"",当前id 话务中心的历史记录，或者当前暂存处理的历史记录
    bjhm:"",
    zxcp:"",
    zryy:"",
    gtnr:"",
    other:"",
    keyup:true,//确定键按下了
},
showTab:{//显示与隐藏tab
    lsjl:true,
    wcjyy:true,
    xdd:true,
    wxyy:true,
},
-->
<template>
    <div id="hotCenter_hwzx_lsjlydd_" class="container-fluid">
        <div  id="details">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>历史记录与订单</legend>
            </fieldset>
            <div class="padding">
                    <div class="layui-tab layui-tab-card ">
                    <ul class="layui-tab-title">
                        <li v-show="showTab==undefined?true:showTab.lsjl" class="layui-this" id="lsjlTab" @click="tabLsjlydd('lsjl')">历史记录</li>
                        <li v-show="showTab==undefined?true:showTab.wcjyy" @click="tabLsjlydd('wcjyy')">未成交</li>
                        <li v-show="showTab==undefined?true:showTab.xdd" @click="tabLsjlydd('xdd')">下订单</li>
                        <li v-show="showTab==undefined?true:showTab.wxyy" @click="tabLsjlydd('wxyy')">无效</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 650px;width:100%">
                        <!--历史记录-->
                        <div class="layui-tab-item layui-show">
                            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" id="lsgtjlTab" @click="tabLsjl('lsgtjl')">历史沟通记录</li>
                                    <li @click="tabLsjl('lsdgjl')">历史订购记录</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 100px;">
                                    <div class="layui-tab-item layui-show">
                                        <script type="text/html" id="lsgtjlToolbar">
                                          <div class="layui-btn-container">
                                            <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh">刷新列表</button>
                                          </div>
                                        </script>
                                        <table class="layui-hide" id="lsgtjl"  lay-filter="lsgtjl"></table>
                                    </div>
                                    <div class="layui-tab-item">
                                        <script type="text/html" id="lsdgjlToolbar">
                                          <div class="layui-btn-container">
                                            <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh">刷新列表</button>
                                          </div>
                                        </script>
                                        <table class="layui-hide" id="lsdgjl"  lay-filter="lsdgjl"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--未成交原因-->
                        <div class="layui-tab-item">
                            <el-form :model="datas" :rules="datas" :inline="true" ref="datas" label-width="100px" class="padding">
                                <el-form-item label="未成交原因" prop="wcjyy">
                                    <el-select v-model="saveOtherDatas.wcjyy">
                                        <el-option label="" value=""></el-option>
                                        <el-option v-for="item in datas['未成交原因']['children']" :key="item.id" :value="item.text" >{{item.text}}</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!--订单详情-->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field site-demo-button">
                                <legend>订单详情</legend>
                                <el-form :model="saveOrderDatas" :rules="rules" :inline="true" ref="saveOrderDatas" label-width="130px" class="padding">
                                    <el-form-item label="收货人" prop="shr">
                                        <el-input v-model="saveOrderDatas.shr" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人邮箱" prop="shryx">
                                        <el-input v-model="saveOrderDatas.shryx" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人邮编" prop="shryb">
                                        <el-input v-model="saveOrderDatas.shryb" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人电话" prop="shrdh">
                                        <el-input v-model="saveOrderDatas.shrdh" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人电话" prop="shrdh">
                                        <el-input v-model="saveOrderDatas.shrdh" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="省份/城市/区县" prop="sfcsqx">
                                        <el-cascader
                                                style="width:300px"
                                                v-model="saveOrderDatas.sfcsqx"
                                                :options="selectArea">
                                        </el-cascader>
                                    </el-form-item>
                                    <el-form-item label="详细地址" prop="xxdz">
                                        <el-input v-model="saveOrderDatas.xxdz" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="备注" prop="bz">
                                        <el-input v-model="saveOrderDatas.bz" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="缺货处理方式" prop="qhcl">
                                        <el-input v-model="saveOrderDatas.qhcl" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="订单状态" prop="ddzt">
                                        <el-input v-model="saveOrderDatas.ddzt" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="配送状态" prop="pszt">
                                        <el-input v-model="saveOrderDatas.pszt" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="支付状态" prop="zfzt">
                                        <el-input v-model="saveOrderDatas.zfzt" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="付款类型" prop="fklx">
                                        <el-select v-model="saveOrderDatas.fklx" style="width:300px">
                                            <el-option label="" value=""></el-option>
                                            <el-option v-for="item in datas['付款类型']['children']" :key="item.id" :value="item.text" >{{item.text}}</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </fieldset>
                            <fieldset class="layui-elem-field site-demo-button">
                                <legend>购物车</legend>
                                <div style="padding: 2px 0px" action="">
                                    <el-form :model="ddDatas" :rules="datas" :inline="true" ref="ddDatas" label-width="100px" class="padding">
                                        <el-button type="success" class="is-round" @click="addProduct()">添加商品</el-button>
                                        <el-form-item label="总金额" prop="zje">
                                            <el-input v-model="ddDatas.zje"></el-input>
                                        </el-form-item>
                                        <el-form-item label="总折扣" prop="zzk">
                                            <el-input v-model="ddDatas.zzk"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div style="height: 130px;">
                                        <script type="text/html" id="selectedProductsBar">
                                          <div class="el-button--danger el-button el-button--mini is-round" lay-event="del" >删除</div>
                                        </script>
                                        <table class="layui-table" lay-size="sm" id="selectedProducts" lay-filter="selectedProducts"></table>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <!--无效原因-->
                        <div class="layui-tab-item">
                            <el-form :model="datas" :rules="datas" :inline="true" ref="datas" label-width="100px" class="padding">
                                <el-form-item label="无效原因" prop="wxyy">
                                    <el-select v-model="saveOtherDatas.wxyy">
                                        <el-option label="" value=""></el-option>
                                        <el-option v-for="item in datas['无效原因']['children']" :key="item.id" :value="item.text" >{{item.text}}</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
                </div>
        </div>
        <div id="addProduct_" style="display: none" class="padding">
            <div class="productSearch el-form--inline">
                <div class="el-form-item">
                    <label class="el-form-item__label" style="width: 130px;">搜索商品名称</label>
                    <input type="text" autocomplete="off" name="spmc" id="productReload" class="el-input__inner" style="width: 300px;">
                    <div class="el-button el-button--primary" data-type="reload">搜索</div>
                </div>
            </div>
            <table class="layui-hide" id="addProduct" lay-filter="addProduct"></table>
            <script type="text/html" id="toolbar">
              <div class="layui-btn-container">
                <div class="el-button el-button--mini is-round" lay-event="getCheckData">添加选中商品</div>
              </div>
            </script>
        </div>
        <!--查询商品规格-->
        <div id="searchSpgg" class="padding" style="display: none">
            <table id="spggList" lay-filter="spggList"></table>
        </div>
        <!--订购记录商品的查看-->
        <div id="lsdgjlSp" class="padding" style="display: none">
            <table id="lsdgjlSpList" lay-filter="lsdgjlSpList"></table>
        </div>
        <script type="text/html" id="lsdgjlSpbar">
          <div class="layui-btn-container">
            <div class="el-button el-button--mini el-button--success is-round" lay-event='lsdgjlSpView'>查看商品</div>
          </div>
        </script>
    </div>
</template>
<script>
    import {formatDateTime} from '../../../../common/js/util';
    import selectArea_ from '../../../../common/js/select_area.js'
    export default {
        props: ['lsjlyddRefresh','params','showTab'],
        watch:{
            lsjlyddRefresh:function () {//khxxRefresh改变了就表示需要刷新界面
                this.searchLsgtjl();
            },
            "ddDatas.zje":function () {this.saveOrderDatas.zje=this.ddDatas.zje},
            "ddDatas.zzk":function () {this.saveOrderDatas.zzk=this.ddDatas.zzk},
        },
        name: "no-cache",
        data() {
            var that = this;
            return {
                shade:true,
                ldhm:"",
                id:"",
                selectArea:selectArea_,
                operation:{
                    hldh:true,
                    zc:false,
                    bc:false,
                    qx:false,
                    rwb:false,
                    cxkh:false,
                    gb:true
                },
                datas:{
                    '未成交原因':{children:[]},
                    '无效原因':{children:[]},
                    '付款类型':{children:[]},
                },
                saveOtherDatas:{
                    wcjyy:"",
                    wxyy:"",
                },
                props: {//分类树的内容
                    value: 'text',
                    label: 'text',
                    children: 'children'
                },
                rules:{//规则
                },
                saveOrderDatas:{//需要保存的数据
                    shr:"",
                    shryx:"",
                    shryb:"",
                    shrdh:"",
                    sfcsqx:[],
                    xxdz:"",
                    bz:"",
                    qhcl:"",
                    ddbh:"",
                    spxq:"",
                    ddzt:"",
                    pszt:"",
                    zfzt:"",
                    xdsj:"",
                    zje:"",
                    zzk:"",
                    fklx:"",
                },
                lsgtjlHeader:[
                    {field: 'id',  title: '序列号', fixed: 'left'}
                    , {field: 'gtsj', title: '沟通时间',templet: function(res){return formatDateTime(res.gtsj);}}
                    , {field: 'gh', title: '工号'}
                    , {field: 'gtnr', title: '沟通内容'}
                    , {field: 'zxcp', title: '质询产品'}
                    , {field: 'lx', title: '类型'}
                    , {field: 'cllx', title: '处理类型'}
                    , {field: 'jcx', title: '进/出线'}
                    , {field: 'khbz', title: '客户备注'}
                    , {field: 'khbz2', title: '其他备注'}
                ],
                lsdgjlHeader:[
                    {field: 'id',  title: '序列号', fixed: 'left',width:100}
                    , {field: 'shr', title: '收货人',sort: true,width:120}
                    , {field: 'shryx', title: '收货人邮箱',width:120}
                    , {field: 'shryb', title: '收货人邮编',width:120}
                    , {field: 'shrdh', title: '收货人电话',width:120}
                    , {field: 'sfcsqx', title: '省份/城市/区县',width:260,templet: function(res){
                            return that.$my_.getSfcsqx(that.selectArea,res.sfcsqx);
                    }}
                    , {field: 'xxdz', title: '详细地址',width:150}
                    , {field: 'bz', title: '备注',width:150}
                    , {field: 'qhcl', title: '缺货处理方式',width:150}
                    , {field: 'ddbh', title: '订单编号',width:180}
                    , {field: 'ddzt', title: '订单状态',width:150}
                    , {field: 'pszt', title: '配送状态',width:150}
                    , {field: 'ddzt', title: '订单状态',width:150}
                    , {field: 'zfzt', title: '支付状态',width:150}
                    , {field: 'fklx', title: '付款类型',width:150}
                    , {field: 'xdsj', title: '下单时间',width:220,templet: function(res){return formatDateTime(res.xdsj);}}
                    , {field: 'zje', title: '总金额',width:120}
                    , {field: 'zzk', title: '总折扣',width:120}
                    , {title: '查看商品',width:120,fixed: 'right',templet:'#lsdgjlSpbar'}
                ],
                lsjlyddClick:'lsjl',//点击的历史订单与记录
                c_lsjlyddLoaded:{//历史记录与订单是否加载标志
                    lsjl:true,
                    wcjyy:true,
                    xdd:true,
                    wxyy:true,
                },
                ddDatas:{//订单数据
                    zje:0,
                    zzk:0,
                    zzsjf:0,
                    zzfjf:0,
                },
                c_lsjlLoaded:{//历史记录是否加载标志
                    lsgtjl:true,
                    lsdgjl:true,
                    lsgdjl:true,
                    khfpls:true,
                },
                productHeader:[//商品的头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id',  title: '序列号'}
                    , {field: 'brand_id', title: '商品品牌'}
                    , {field: 'type_id', title: '商品类型',sort: true}
                    , {field: 'property_id', title: '商品属性'}
                    , {field: 'spbm', title: '商品编码'}
                    , {field: 'spmc', title: '商品名称'}
                    , {field: 'spgg', title: '商品规格',event: 'spgg', unresize: true,style:'background-color: #009688; color: #fff;cursor: pointer;'}
                    , {field: 'sppp', title: '商品品牌'}
                    , {field: 'splx', title: '商品类型'}
                    , {field: 'spsx', title: '商品属性'}
                    , {field: 'dj', title: '单价',edit: 'text',}
                    , {field: 'sl', title: '数量', edit: 'text',}
                    , {field: 'yhj', title: '优惠价',edit: 'text',}
                ],
                gwcHeader:[//购物车的头
                     {field: 'id',  title: '序列号',totalRowText: '合计：'}
                    , {field: 'brand_id', title: '商品品牌'}
                    , {field: 'type_id', title: '商品类型'}
                    , {field: 'property_id', title: '商品属性'}
                    , {field: 'spbm', title: '商品编码'}
                    , {field: 'spmc', title: '商品名称'}
                    , {field: 'spgg', title: '商品规格'}
                    , {field: 'sppp', title: '商品品牌'}
                    , {field: 'splx', title: '商品类型'}
                    , {field: 'spsx', title: '商品属性'}
                    , {field: 'dj', title: '单价'}
                    , {field: 'sl', title: '数量', totalRow: true,}
                    , {field: 'yhj', title: '优惠价'}
                    , {fixed: 'right', width:120, align:'center', toolbar: '#selectedProductsBar'}
                ],
                spggHeader:[//商品规格的头
                     {field: 'ggmc', title: '规格名称', sort: true}
                ],
                selectedProduct:[//选中的商品
                ],
            }
        },
        beforeCreate: function(){
            this.$nextTick(function () {
                layui.use('element');
            });
        },
        methods:{
            searchLsgtjl: function(){//查询历史沟通记录
                this.c_lsjlLoaded.lsgtjl = true;
                this.c_lsjlLoaded.lsdgjl = true;
                this.c_lsjlLoaded.lsgdjl = true;
                this.c_lsjlLoaded.khfpls = true;
                $("#lsjlTab").click();
                $("#lsgtjlTab").click();
                noCheckCache = true;
            },
            tabLsjlydd:function (id) {//切换 历史记录与订单 tab
                this.lsjlyddClick = id;//点击tab的id
                if(this.c_lsjlyddLoaded[id]) {
                    switch (id){
                        case "wcjyy":
                            //查找字典数据，然后填充到数据框里面
                            this.$message_.postTips(this,'','basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys({'未成交原因':{children:{}}})}},null,(response)=>{
                                this.datas['未成交原因'] = response.data.data['未成交原因'];
                            },'datas.未成交原因.children')
                            break;
                        case "xdd":
                            //查找字典数据，然后填充到数据框里面
                            this.$message_.postTips(this,'','basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys({'付款类型':{children:{}}})}},null,(response)=>{
                                this.datas['付款类型'] = response.data.data['付款类型'];
                            },'datas.付款类型.children')
                            break;
                        case "wxyy":
                            //查找字典数据，然后填充到数据框里面
                            this.$message_.postTips(this,'','basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys({'无效原因':{children:{}}})}},null,(response)=>{
                                this.datas['无效原因'] = response.data.data['无效原因'];
                            },'datas.无效原因.children')
                            break;
                    }
                    this.$set(this.c_lsjlyddLoaded,id,false)
                }
            },
            getTableList:function(id){
                this.$message_.layTable(this,'crm-hot-center-hwzx/find-'+id,"#"+id,{ldhm:this.params.ldhm,other_id:this.params.other_id},eval("this."+id+"Header"),550,'#'+id+'Toolbar',true);
            },
            tabLsjl:function (id) {//切换 历史记录 tab
                if(this.c_lsjlLoaded[id]){
                    this.getTableList(id);
                    layui.table.on('toolbar('+id+')', (obj)=>{
                        switch(obj.event){
                            case 'refresh':
                                noCheckCache = true;
                                this.getTableList(id);
                                break;
                        };
                    });
                    layui.table.on('tool('+id+')', (obj)=>{
                        switch(obj.event){
                            case 'lsdgjlSpView':
                                noCheckCache = true;
                                this.$message_.layOpen('#lsdgjlSp');
                                this.$message_.layTable(this,'crm-hot-center-hwzx/find-lsdgjl-sp',"#lsdgjlSpList",{order_id:obj.data.id},this.gwcHeader,550,'');
                                break;
                        };
                    });
                    this.$set(this.c_lsjlLoaded,id,false)
                }
            },
            addProduct:function(data=null){//新增商品
                allIndex = this.$message_.layOpen("#addProduct_",null,'商品列表');
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    this.$message_.layTable(this,'crm-order-manager/product-list',"#addProduct",{},this.productHeader,0,'#toolbar',true);
                    $('.productSearch .el-button').on('click', ()=>{
                        noCheckCache = true;
                        this.$message_.layTable(this,'crm-order-manager/product-list',"#addProduct",{spmc: $('#productReload').val()},this.productHeader,0,'#toolbar',true);
                    });
                    //头工具栏事件
                    layui.table.on('toolbar(addProduct)', (obj)=>{
                        //拿到选中的商品
                        var checkStatus = layui.table.checkStatus(obj.config.id);
                        switch(obj.event){
                            case 'getCheckData':
                                var data = checkStatus.data;
                                if (data.length==0){
                                    this.$message({message:'请选择商品！',type:'error'});
                                }else{//先将数据传递到下一个页面，然后再关闭
                                    if (this.selectedProduct.length==0){
                                        this.selectedProduct = data;
                                    }else{
                                        for (let i=0;i<data.length;i++){
                                            this.selectedProduct.push(data[i]);
                                        }
                                    }
                                    this.calculate();//计算商品的积分
                                    layui.table.render({
                                        elem: '#selectedProducts'
                                        ,url: burl + 'common/null-lay-data'
                                        , title: ''
                                        , height: 200
                                        , limits: [10, 30, 60, 90]
                                        , totalRow: true
                                        ,page: false //开启分页
                                        ,cols: [this.gwcHeader]
                                        ,parseData: (res)=>{ //res 即为原始返回的数据
                                            return {
                                                "code": 0, //解析接口状态
                                                "msg": "", //解析提示文本
                                                "count": 1000, //解析数据长度
                                                "data": this.selectedProduct
                                            };
                                        }
                                    });
                                    //监听行工具事件
                                    layui.table.on('tool(selectedProducts)', (obj)=>{
                                        switch(obj.event){
                                            case 'del':
                                                layer.confirm("确认是否删除该文件！", (i) =>{
                                                    obj.del()
                                                    this.calculate();//计算
                                                    layer.close(i)
                                                    this.$message({message:"删除成功！",type:"success"})
                                                });
                                                break;
                                        };
                                    });
                                    layer.close(allIndex);
                                }
                                break;
                        };
                    });
                    //栏目事件
                    layui.table.on('tool(addProduct)', (obj)=>{
                        switch(obj.event){
                            case 'spgg'://监听单元格点击事件
                                var allIndex = layer.open({
                                    type: 1,
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['40%', '40%'], //宽高
                                    close: true,
                                    title: "请选择商品规格",
                                    shadeClose: true,
                                    content: $("#searchSpgg"),
                                });
                                this.$message_.layTable(this,'crm-order-manager/product-spgg',"#spggList",{product_id:obj.data.id},this.spggHeader,0,'');
                                //监听行单击事件（单击事件为：rowDouble）
                                layui.table.on('row(spggList)', (obj_)=>{
                                    //标注选中样式
                                    setTimeout(()=>{
                                        obj_.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                                        obj.data.spgg = obj_.data.ggmc;
                                        obj.data.specify_id = obj_.data.id;
                                        obj.update(obj.data);
                                        layer.close(allIndex);
                                    })
                                });
                                break;
                        };
                    });
                });
            },
            calculate:function(){//计算商品的积分
                this.ddDatas.zje = 0;
                this.ddDatas.zzk = 0;
                for (let i=0;i<this.selectedProduct.length;i++){
                    if (this.selectedProduct[i].length==undefined){
                        if (this.selectedProduct[i]['yhj']!=""){//优惠价存在
                            var zyhj = parseFloat(this.ddDatas.zje) + (parseFloat(this.selectedProduct[i]['yhj'])*parseFloat(this.selectedProduct[i]['sl']==null?0:this.selectedProduct[i]['sl']));//计算总优惠价
                            var zje = parseFloat(this.ddDatas.zje) + (parseFloat(this.selectedProduct[i]['dj'])*parseFloat(this.selectedProduct[i]['sl']==null?0:this.selectedProduct[i]['sl']));//计算总优惠价
                            this.ddDatas.zje = zyhj;//计算总金额
                            this.ddDatas.zzk = zje==0?0:(zyhj/zje).toFixed(2);//计算总折扣
                        }else{//优惠价不存在
                            this.ddDatas.zje = parseFloat(this.ddDatas.zje) + (parseFloat(this.selectedProduct[i]['yhj'])*parseFloat(this.selectedProduct[i]['sl']==null?0:this.selectedProduct[i]['sl']));//计算总金额
                            this.ddDatas.zzk = 0;
                        }
                    }
                }
            }
        },
    }
</script>